<template>
    <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="() => { $router.push('/home/fen') }" />
    <van-empty v-if="!gwcdata.length" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80" description="描述文字" />

    <div v-for="item in gwcdata">
        <van-swipe-cell>
            <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                <template #thumb>
                    <div style="display: flex;width: 100px;">
                        <van-checkbox v-model="item.checked"></van-checkbox>
                        <img :src="item.goods.goods_big_logo" alt="" style="width: 80px;">
                    </div>
                </template>
                <template #num>
                    <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
                </template>
            </van-card>
            <template #right>
                <van-button @click="scsj(item.id)" square text="删除" type="danger" class="delete-button"
                    style="height: 100px;" />
            </template>
        </van-swipe-cell>


    </div>


    <van-submit-bar :price="jiag" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checkedall">全选</van-checkbox>
    </van-submit-bar>

</template>

<script setup>
import { useCounterStore } from '@/stores/cart'
import { computed, ref } from 'vue';
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
let gwcdata = ref([])

const cartxr = () => {
    let username = localStorage.getItem('username')
    gwcdata.value = store.cart.filter(item => item.username ==  username)
    console.log(gwcdata.value);
}
cartxr()

const scsj = (id) => {
    console.log(id);
    store.cart = store.cart.filter(item => item.id != id)
    cartxr()
}
const checkedall = computed({
    get() {
        if (gwcdata.value.length == 0) {
            return false;
        } else {
            return gwcdata.value.every(item => item.checked)
        }
    },
    set(val) {
        console.log(val);
        gwcdata.value.forEach(item => item.checked = val)
    }
})

let jiag = computed(() => {
    let jiag = 0;
    let cartok = gwcdata.value.filter(item => item.checked)

    cartok.forEach(item => {
        jiag += item.number * item.goods.goods_price
    })
    return jiag *100
})
</script>

<style lang="scss" scoped></style>